<template>
    <div>
        <el-page-header content="个人中心" icon="" :title="store.state.companyData.companyName"></el-page-header>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card class="box-card">
                    <el-avatar :size="100" :src="avatarUrl"></el-avatar>
                    <h3>{{ store.state.user.username }}</h3>
                    <h3>{{ store.state.user.role === 1 ? '超级管理员' : '管理员' }}</h3>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>个人信息</span>
                        </div>
                    </template>
                    <el-form :model="userForm" :rules="userFormRules" ref="userFormRef" label-width="100px"
                        class="demo-ruleForm">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="userForm.username"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="gender">
                            <el-select v-model="userForm.gender" placeholder="请选择性别" style="width:100%">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="简介" prop="introduction">
                            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="userForm.introduction" />
                        </el-form-item>
                        <el-form-item label="头像">
                            <div class="box-card">
                                <img class="the_img" :src="userForm.avatar" alt="">
                                <div class="btn-box">
                                    <input type="file" accept="image/*" style="display: none" id="iptRef" @change="onFileChange" />
                                    <el-button type="primary" icon="el-icon-plus" @click="chooseImg">选择图片</el-button> 
                                </div>
                            </div>
                        </el-form-item> 
                        <el-button style="margin-left:48%" type="primary" @click="submitForm()">更新</el-button>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { computed, ref, reactive } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus'
import { uploadUserAPI } from '@/api'

const store = useStore()
const avatarUrl = computed(() => store.state.user.avatar ? store.state.user.avatar : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')
const userFormRef = ref()
const { username, gender, introduction, avatar, id } = store.state.user
const userForm = reactive({
    id,
    username,
    gender,
    introduction,
    avatar
})
const userFormRules = reactive({
    username: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
    ],
    gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
    introduction: [{ required: true, message: '请输入简介', trigger: 'blur' }]
})

// 性别选择
const options = [
    { label: '保密', value: 0 },
    { label: '男', value: 1 },
    { label: '女', value: 2 },
]
// 更新提交
const submitForm = () => {    
    userFormRef.value.validate(async valid => {
        if (valid) {
            userForm.id = id
            const { data: res } = await uploadUserAPI(userForm)
            if (res.status !== 0) {
                ElMessage.error('更新失败');
                return
            }
            userForm.avatar=userForm.avatar
            ElMessage.success('更新成功')
            // 更新用户信息传给store
            store.commit('updateUser', res.data)
            console.log('res', res.data);
        }
    })
}


// 图片
const chooseImg=function () {
    // 模拟点击行为
    document.getElementById('iptRef').click()
    // this.$refs.iptRef.click()
  }
const onFileChange=function (e) {
    const files = e.target.files // 拿到用户选择的文件数组
    console.log(files);
    if (files.length === 0) {
     
    } else {
      // 解决方案2：文件->base64字符串（此字符串是可以发给后台的）
      const fr = new FileReader()
      fr.readAsDataURL(files[0]) // 传入文件对象开始读
      fr.onload = (e) => { 
        userForm.avatar = e.target.result // 赋予给变量，让他显示在img的src里
      }
    }
  }
</script>

<style lang="scss" scoped>
.el-row {
    margin-top: 20px;
    .box-card {
        text-align: center
    }
}

// 图片
.btn-box {
  margin-top: 10px;
}
.preview {
  object-fit: cover;
}
.the_img{
    width: 150px;
    height: 150px;
}
</style>